<!-- 发布乐跑 -->
<template>
  <div class="fire">
    <NavBar2 :fnTitle="title"></NavBar2>
    <div class="content">
      <van-notify v-model="show2" type="success">
        <van-icon name="bell" style="margin-right: 4px;" />
        <span>保存成功</span>
      </van-notify>
      <van-notify v-model="show4" type="warning">
        <van-icon name="bell" style="margin-right: 4px;" />
        <span>最多两张图片</span>
      </van-notify>
      <div class="send_info">
        <textarea id="send_info_text" placeholder="讲诉你的心声" v-model="tabletext">
        </textarea>
      </div>
      <div class="send_function">
      <van-uploader :after-read="afterRead"  v-model="fileList" :deletable="true" ref="file">
      </van-uploader>   
      </div>
      </div>
      <div class="btn_box"><button class="btn" @click="locationText">保存</button></div>
    </div>
</template>

<script>

import NavBar2 from '@/components/NavBar2'
import Vue from 'vue'
import { Dialog } from 'vant'
import axios from 'axios'
Vue.use(axios)
Vue.use(Dialog)
export default {
  created() {
  },
  data() {
    return {
      title: '发布表白',
      checked: true,
      tabletext: '',
      show2:false,
      show4:false,
      value: '',
      tabletext: '',
      fileList:[],
      fileList_get:[]
    }
  },
  components: {
    NavBar2
  },
  methods: {
    // 弹出层

    showNotify() {
      this.show2 = true;
      setTimeout(() => {
        this.show2 = false;
      }, 2000);
    },
    showNotify2() {
      this.show4 = true;
      setTimeout(() => {
        this.show4 = false;
      }, 2000);
    },
    afterRead(files) {
      const that = this;
       const file = new FormData();
       file.append("file", files.file);
       axios.post('http://39.96.36.251/api/file/photo',file,{
         "content-type":"multipart/form-data"
       })
       .then(function(res){
        that.fileList_get.push(res.data)
        if(that.fileList_get.length >= 3)
      { 
        that.showNotify2()
        that.$delete(that.fileList_get,2)
        that.$delete(that.fileList,2)
      }
    })
       

    },
    locationText() {
      var val = this.tabletext
      sessionStorage.setItem('LikeText', val)
      sessionStorage.setItem("Likepicture1",this.fileList_get[0])
      sessionStorage.setItem("Likepicture2",this.fileList_get[1])
      this.showNotify()
    },
  }
}
</script>

<style scoped>
.memedata {
  text-align: center;
}
.info_show {
  height: 500px;
  /* width: 300px; */
  overflow: hidden;
  overflow-y: scroll;
}
.btn_box {
  text-align: center;
}
.btn {
  margin-top: 1%;
  border: .026667rem solid #fff;
  border-radius: .533333rem;
  background-color: rgb(243, 133, 60);
  color: #fff;
  width: 30%;
  height: .8rem;
}
#send_info_text {
  margin-top: 5px;
  display: block;
  width: calc(90vw);
  padding: 10px;
  height: calc(40vh);
  margin: 0 auto;
  background-color: rgba(228, 228, 228, 0.644);
  border: none;
  outline: none;
  resize:none;
}
.send_function {
  margin-top: 5px;
  width: calc(90vw);
  padding: 10px;
  margin: 0 auto;
  /* vertical-align: middle; */
}
.send_function span {
  /* display: inline-block; */
  /* height: 25px; */
  vertical-align: middle;
  margin-left: 15px;
  font-size: 15px;
}
.fun {
  height: 50px;
  padding: 0 15px;
  margin: 10px 0;
  /* vertical-align: middle!important; */
}
.van-icon {
  vertical-align: middle!important;
}
.van-switch {
  float: right;
}
</style>